<template>
    <view class="white-block wallet-clock" :class="props.type">
        <view class="wallet-item" v-for="item in props.walletList" :key="item._id">
            <image class="assets-icon" :src="imgUrl"/>
            <view class="wallet-item-name">{{ item.propertyName }}</view>
            <view class="wallet-item-count">￥{{ item.count }}</view>
        </view>
    </view>
</template>

<script setup>
    import { computed, defineProps } from 'vue'
    const props = defineProps({
    	type: {
            type: String,
            default: 'assets'
        },
        walletList: {
        	type: Array,
        	default: () => []		
        }
    })
    const imgUrl = computed(()=>{
        return `/static/${props.type}.png`
    })
</script>

<style lang="less" scoped>
    .wallet-clock{
        margin-top: 30rpx;
        padding-top: 0;
        padding-bottom: 0;
        .wallet-item{
            display: flex;
            height: 100rpx;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #F5F5F5;
            &:last-child{
                border-bottom: none;
            }
            .assets-icon{
                width: 32rpx;
                height: 32rpx;
                margin: 0 32rpx;
            }
            .wallet-item-name{
                flex: 1;
                font-size: 32rpx;
                color: #333333;
            }
            .wallet-item-count{
                font-size: 32rpx;
            }
        }
        &.assets{
            .wallet-item{
                .wallet-item-count{
                    color: #00CC99;
                }
            }
        }
        &.liabilities{
            .wallet-item{
                .wallet-item-count{
                    color: #FF6B6B;
                }
            }
        }
        &.empty-wallet{
            .wallet-item{
                .wallet-item-name{
                    color: #999999;
                }
                .wallet-item-count{
                    color: #999999;
                }
            }
        }
    }
</style>